<template>
<div class="app-container">
     <el-card>
        <div slot="header" class="clearfix">
                <span>搜索条件</span>
        </div>
        <div class="filter-container">
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">商品状态</p>
                <el-button :type="status === item.value ? 'primary' : ''" v-for="item in statusList" :key="item.name" @click="setStatus(item)" size="mini">{{item.name}}</el-button>
            </div>
            <div style="display:flex;align-items:center">
                <p style="font-size:14px;margin-right:10px">创建时间</p>
                <el-button :type="data == item.value ? 'primary' : ''" v-for="item in dataList" :key="item.name"  @click="setData(item)" size="mini">{{item.name}}</el-button>
                <el-button size="mini" ref="time" @click="setData({value:'zd',is_zd:true})" :type="data == 'zd'? 'primary' : ''">自定义</el-button>
                <el-date-picker 
                    v-model="data"
                    style="margin-left:10px"
                    v-show="showtime==true"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                 </el-date-picker>
            </div>
            <div style="margin-top:25px">
                 <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="search">
                {{ '搜索' }}
            </el-button>
              <el-button v-waves  class="filter-item" type="info" icon="el-icon-refresh-left" size="mini" @click="refresh">
                {{ '重置' }}
            </el-button>
            </div>
            
        </div>
     </el-card>
     <el-row :gutter="20" style="margin-top:20px;font-size:14px">
        <el-col :span="item.col!=undefined ? item.col : 6" v-for="item in badge" :key="item.name">
            <el-card class="box-card">
                <div slot="header">
                    <span>{{item.name}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{item.field}}</el-button>
                </div>
                <div>
                     <span>{{item.count}}</span>
                     <p v-if="item.content!=undefined"  style="display:flex;justify-content:space-between">
                        {{item.content}}
                        <span>{{item.sum}}<i :class="item.class"></i></span>
                    </p>
                </div>
              
            </el-card>
    </el-col>
    </el-row>
     <el-card style="margin-top:20px;margin-bottom:20px">
        <div slot="header" class="clearfix">
                <span>图表展示</span>
        </div>
        <div class="filter-container" ref="echarts_list" style="width:100%;height:450px">
            
        </div>
     </el-card>   
     
    <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="14">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>销售排行</span>
                    <el-tag type="success" size="small" style="margin-left:10px">TOP10</el-tag>
                </div>
                <div class="text item">
                     <p class="layuiadmin-normal-font">商品销售总计：<span style="color:lightblue">{{ProfityList.sum_count}}</span> 件 共计 <span style="color:coral">{{ProfityList.sum_price}}</span>元</p>
                    <el-table :data="ProfityList.list" stripe :size="'small'">
                        <el-table-column label="商品">
                            <template slot-scope="scope">
                                <div style="display:flex; align-items:center">
                                    <el-image  style="width: 50px; height: 50px" :src="scope.row.image"> </el-image>
                                    <span style="margin-left: 10px">{{ scope.row.store_name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="w"
                            label="销量占比(%)"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="p_count"
                            label="购买个数"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="profity"
                            label="销售额(￥)"
                            >
                        </el-table-column>
                    </el-table>
                </div>
                </el-card>
        </el-col>
        <el-col :span="10">
        <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>收藏排行</span>
                    <el-tag type="success" size="small" style="margin-left:10px">TOP10</el-tag>
                </div>
                <div class="text item">
                      <p class="layuiadmin-normal-font">商品收藏次数：<span style="color:lightblue">{{CollectList.all_count}}</span> 次</p>
                    <el-table :data="CollectList.list" stripe :size="'small'">
                        <el-table-column label="商品图片">
                            <template slot-scope="scope">
                                  <el-image  style="width: 50px; height: 50px" :src="scope.row.image"> </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="store_name"
                            label="商品名称"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="number"
                            label="收藏数量"
                            >
                        </el-table-column>
                    </el-table>
                </div>
                </el-card>
        </el-col>
    </el-row>

     <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>待补货产品</span>
                </div>
                <div class="text item">
                    <el-table :data="negativeList" stripe :size="'small'">
                        <el-table-column label="商品">
                            <template slot-scope="scope">
                                <div style="display:flex; align-items:center">
                                    <el-image  style="width: 50px; height: 50px" :src="scope.row.image"> </el-image>
                                    <span style="margin-left: 10px">{{ scope.row.store_name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="单价"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="stock"
                            label="剩余库存"
                            >
                        </el-table-column>
                    </el-table>
                </div>
                </el-card>
        </el-col>
        <el-col :span="12">
        <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>退货产品</span>
                </div>
                <div class="text item">
                    <el-table :data="TuiPriesList" stripe :size="'small'">
                        <el-table-column label="商品图片">
                            <template slot-scope="scope">
                                  <el-image  style="width: 50px; height: 50px" :src="scope.row.image"> </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="单价"
                            >
                        </el-table-column>
                         <el-table-column
                            prop="count"
                            label="退货数量"
                            >
                        </el-table-column>
                    </el-table>
                </div>
                </el-card>
        </el-col>
    </el-row>
</div>
 
</template>

<script>
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import * as echarts from 'echarts'
import {goods_chart,get_echarts_collection,get_echarts_profity,get_echarts_stock,getTuiPriesList} from '@/api/record' // api接口
require('echarts/theme/macarons') // echarts theme
export default{
    name: 'chart_order',
     directives: { waves, permission }, // 引入指令
    data() {
        return {
                option:{},
                badge:[],
                CollectList:[], //收藏
                ProfityList:[], //销量 
                negativeList:[], //待补货
                TuiPriesList:[], //退货 退款
                statusList:[
                    {name:'全部商品',value:''},
                    {name:'待上架产品',value:1},
                    // {name:'新品',value:2},
                    {name:'已经售馨产品',value:3},
                    // {name:'警戒库存',value:4}
                ],
                dataList:[
                    {name:'全部',value:''},
                    {name:'今天',value:'today'},
                    {name:'本周',value:'week'},
                    {name:'本月',value:'month'},
                    {name:'本季度',value:'quarter'},
                    {name:'本年',value:'year'},
                ],
                status:'',
                data:'',
                title:'全部商品',
                type:'',
                count:0,
                myChart:{},
                showtime:false,
        }
    },
    methods:{
        search:function(){
                    this.info();
                },
        refresh:function () {
            this.status='';
            this.type='';
            this.data='';
            this.info();
        },
        info:function(){
            var that=this;
            goods_chart({type:that.status,data:that.data}).then(res=>{
                that.badge=res.data.badge;
                that.count=res.data.count;
                this.setChart(this.$refs.echarts_list,'list');
                var option=that.setoption(res.data.datetime,res.data.legdata,res.data.chatrList);
                that.myChart.list.setOption(option);
            })
    
    },
            getCollectionList:function(){
                    var that=this;
                    get_echarts_collection({data:this.data}).then(res=>{
                        that.CollectList=res.data;
                    })
                },
                getProfityList:function(){
                    var that=this;
                    get_echarts_profity({data:this.data}).then(res=>{
                        that.ProfityList=res.data;
                    })
                },
                getnegativeList:function(){
                    var that=this;
                    get_echarts_stock().then(res=>{
                        that.negativeList=res.data;
                    })
                },
                getTuiPriesList:function(){
                    var that=this;
                    getTuiPriesList().then(res=>{
                        that.TuiPriesList=res.data;
                    })
    
                },
     setoption:function(xdata,legdata,seriesdata){
                    return this.option={
                        title: {text:this.title+'('+this.count+')'+'件',},
                        tooltip: {show: true},
                        legend: {data:legdata,},
                        xAxis : [{type : 'category', data :xdata,}],
                        yAxis : [{type : 'value'}],
                        series:seriesdata,
                    };
                },
         setStatus:function (item){
                    this.status=item.value;
                    this.title=item.name;
                },
        setType:function(item){
                this.type = item.value;
              
            },
             setData:function(item){
                    var that=this;
                    if(item.is_zd==true){
                        that.showtime=true;
                        this.data=this.$refs.date_time.innerText;
                    }else{
                        this.showtime=false;
                        this.data=item.value;
                    }
                },
         checkPermission, // 权限判断函数
         handleFilter() { // 查询
                // this.listQuery.page = 1
                // this.getList()
        },
         setChart:function(name,myChartname){
            this.myChart[myChartname]=echarts.init(name);
        },
        
    },
      mounted:function () {
        this.info();
        this.getProfityList(); 
        this.getnegativeList();
        this.getCollectionList();
        this.getTuiPriesList();
    }
}

</script>
